<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style type="text/css">
      /* .wrap {
        width: 300px;
        height: 200px;
        background: #ccc;
        position: relative;
      } */
      .ball {
        width: 3vw;
        height: 3vw;
        position: absolute;
      }
      .wrap {
          width: 100vw;
          height: 100vh;
      }
      .box {
        width: 100vw;
        height: 100vh;
        overflow: auto;
      }
      body {
          margin: 0;
          padding: 0;
      }
      .imgSty {
          width: 100vw;
          height: 99.5vh;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="wrap">
        <img src="imgs/timg.jpeg" alt="" class="imgSty" />
        
      </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script type="text/javascript">
      $(".wrap").click(function (e) {
        var radius = 0; //半径
        var offset = $(this).offset();
        var top = e.pageY - offset.top - radius + "px";
        var left = e.pageX - offset.left - radius + "px";
        $(".wrap").append(
          '<img class="ball" style="top:' + top + ";left:" + left + '" src="imgs/alerm.gif"></img>'
        );
        // $(".container").html(
        //   '<div class="ball" style="top:' + top + ";left:" + left + '"></div>'
        // );
        alert(top + "_" + left);
      });
    </script>
  </body>
</html>
